import { List, Pagination, Popover, Tabs } from 'antd'
import { connect } from 'dva'
import { QRCodeSVG } from 'qrcode.react'
import { useState } from 'react'
import AutoSizer from 'react-virtualized-auto-sizer'

import { inpatientWardListApi } from '@/api/pcs/pcsInpatientWard'
import PageLayout from '@/components/PageLayout'
import SearchForm from '@/components/SearchForm'
import { namespace } from '@/models/pcs/pcsCompanionOrder'
import { getPagination } from '@/utils/antdHelper'
import { formatDate } from '@/utils/displayHelper'
import { getBasicFn } from '@/utils/dvaUtil/index'
import { GENDER_ENUM, PCS_COMPANION_ORDER_STATUS_ENUM } from '@/utils/enum'

import DetailDrawer from './components/DetailDrawer'
import female from './imgs/female.png'
import male from './imgs/male.png'
import styles from './index.module.less'

const itemSize = [280, 220]

/** 陪护 - 陪护订单 */
const Index = ({ modelState, loading }) => {
  const { pageList, pagination, searchParams } = modelState
  const { toAction, getLoading } = getBasicFn({ namespace, loading })

  const [columnSize, setColumnSize] = useState(2)

  const onResize = ({ width }) => {
    const rowColumn = Math.floor(width / itemSize[0]) || 1
    setColumnSize(rowColumn)
  }

  const onActiveKeyChange = activeKey => {
    toAction({ searchParams: { status: activeKey } })
    toAction({ pagination: { current: 1 } }, true)
    toAction('getPageList')
  }

  const onDetail = ({ id }) => {
    DetailDrawer.PromiseThen({
      id,
      afterClose: refresh => {
        if (!refresh) return
        toAction('getPageList')
      },
    })
  }

  /** @type {import("@/components/SearchForm").SearchFormProps} */
  const searchProps = {
    searchParams,
    formData: [
      { field: 'patientNameOrBedNumber', label: '患者姓名/床位号', component: { name: 'Input' } },
      { field: 'createDate', label: '创建日期', component: { name: 'RangePicker' } },
      {
        field: 'inpatientWardId',
        label: '病区',
        component: {
          name: 'AekSelect',
          props: { api: inpatientWardListApi },
        },
      },
    ],
    onSearch: values => {
      toAction({ searchParams: values })
      toAction({ pagination: { current: 1 } }, true)
      toAction('getPageList')
    },
  }

  return (
    <PageLayout>
      <Tabs
        activeKey={String(searchParams.status)}
        items={[{ value: '', label: '全部' }, ...PCS_COMPANION_ORDER_STATUS_ENUM.options].map(({ value, label }) => ({
          key: String(value),
          label,
        }))}
        onChange={onActiveKeyChange}
      />
      <SearchForm {...searchProps} />
      <div className='flex-grow-1'>
        <AutoSizer onResize={onResize}>
          {({ width, height }) => (
            <List
              className={styles.patientList}
              style={{ height, width }}
              loading={getLoading('getPageList')}
              pagination={false}
              grid={{ gutter: 10, column: columnSize }}
              dataSource={pageList}
              renderItem={item => {
                const { id, inpatientWardName, bedNumber, operatorTime, patientName, gender, status } = item
                return (
                  <List.Item key={id} className={styles.patientCard}>
                    <div onClick={() => onDetail(item)}>
                      <div className='flex items-center justify-between'>
                        <div className='flex'>
                          <div className={styles.name}>{patientName}</div>
                          <div
                            className={styles.status}
                            style={{ background: PCS_COMPANION_ORDER_STATUS_ENUM.getOption(status).tagColor }}
                          >
                            {PCS_COMPANION_ORDER_STATUS_ENUM.getText(status)}
                          </div>
                        </div>
                        {gender ? <img src={gender === GENDER_ENUM.FEMALE ? female : male} alt='' /> : undefined}
                      </div>
                      <div className={styles.inpatientWardName}>
                        {inpatientWardName} - {bedNumber}床
                      </div>
                      <div className={styles.operatorTime}>{formatDate(operatorTime)}</div>
                      <Popover
                        placement='bottom'
                        content={
                          <div
                            className={styles.bigPatientQRcodeDiv}
                            onClick={e => {
                              e.stopPropagation()
                            }}
                          >
                            <QRCodeSVG value={id} className={styles.bigPatientQRcode} />
                          </div>
                        }
                      >
                        <QRCodeSVG value={id} className={styles.patientQRcode} />
                      </Popover>
                    </div>
                  </List.Item>
                )
              }}
            />
          )}
        </AutoSizer>
      </div>
      <div className='pt10px flex justify-end'>
        <Pagination
          style={{ textAlign: 'right', flexGrow: 0 }}
          {...getPagination(pagination, (current, pageSize) => {
            toAction({ pagination: { current, pageSize } }, true)
            toAction('getPageList')
          })}
        />
      </div>
    </PageLayout>
  )
}
export default connect(store => ({
  modelState: store[namespace],
  loading: store.loading,
}))(Index)
